<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待对接" name="wait">
        <div class="filter-container">
          <el-select v-model="listQuery.category_id" 
          class="filter-item" 
          style="width: 150px;" 
          placeholder="类目"
          filterable
          clearable>
            <el-option
              v-for="item in varityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="listQuery.brand_id" class="filter-item" style="width: 150px;" placeholder="品牌" filterable
                     clearable>
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="listQuery.traveler_location_id" class="filter-item" style="width: 150px;" filterable
                     clearable placeholder="国家">
            <el-option
              v-for="item in countryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-input v-model="listQuery.keywords" placeholder="发布编号/买家姓名/产品名称" style="width: 250px;" class="filter-item" @keyup.enter.native="handleFilter" />
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>

        </div>
        
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          fit
          highlight-current-row
          style="width: 100%;"
         
        >
          
          <el-table-column label="ID" prop="id"  align="center" width="80" :class-name="getSortClass('id')">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="产品图片" min-width="150px">
            <template slot-scope="{row}">
              <img :src="row.imgSrc">
            </template>
          </el-table-column> -->
          <el-table-column label="产品名称" min-width="250px">
            <template slot-scope="{row}">
              <a @click="toDemandWait(row)" class="a-hover">{{ row.wish_name }}</a>
            </template>
          </el-table-column>
          <el-table-column label="规格" min-width="100px">
            <template slot-scope="{row}">
              <span>{{  row.product_specs&&row.product_specs.name  }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" min-width="100px">
            <template slot-scope="{row}">
              <span>{{ row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="买家" min-width="100px">
            <template slot-scope="{row}">
              <span>{{ row.customer.nickname || row.customer.customer_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="买家电话" min-width="150px">
            <template slot-scope="{row}">
              <span>{{ row.customer.phone }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="状态" prop="status" class-name="status-col"  width="100">
            <template slot-scope="{row}">
              <!--  <el-tag :type="row.status | statusFilter">
            {{ row.status }}
          </el-tag> -->
              <span v-if="row.status==0" class="status-ball draft" />
              <span v-if="row.status==1" class="status-ball published" />
              <span>{{row.status | statusFilter}}</span>
              <!-- <span>{{ row.status }}</span> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
            <template slot-scope="{row,$index}">

              <el-button type="primary"
                         size="mini"
                         
                         @click.stop="$router.push({ path: `/demand/wait/${row.id}` })">查看</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteWait(row)" />
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      </el-tab-pane>
      <el-tab-pane label="已对接" name="receive">
        <div class="filter-container">
          <el-select v-model="listQuery.category_id" class="filter-item" style="width: 150px;" filterable
                     clearable placeholder="类目">
            <el-option
              v-for="item in varityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="listQuery.brand_id" class="filter-item" style="width: 150px;" filterable
                     clearable placeholder="品牌">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="listQuery.traveler_location_id" class="filter-item" style="width: 150px;" filterable
                     clearable placeholder="国家">
            <el-option
              v-for="item in countryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-input v-model="listQuery.keywords" placeholder="发布编号/买家姓名/产品名称" style="width: 250px;" class="filter-item" @keyup.enter.native="handleFilter" />
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>

        </div>
        
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          fit
          highlight-current-row
          style="width: 100%;"
        
        >
         
          <el-table-column label="ID" prop="id"  align="center" width="80" :class-name="getSortClass('id')">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>

         
          <el-table-column label="产品名称" min-width="250px">
            <template slot-scope="{row}">
              <a @click="toDemandReceived(row)" class="a-hover">{{ row.wish_name }}</a>
            </template>
          </el-table-column>
          <el-table-column label="规格" min-width="100px">
            <template slot-scope="{row}">
              <span>{{  row.product_specs&&row.product_specs.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" min-width="100px">
            <template slot-scope="{row}">
              <span>{{ row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="买家" min-width="100px">
            <template slot-scope="{row}">
              <span>{{ row.customer.nickname || row.customer.customer_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="买家电话" min-width="150px">
            <template slot-scope="{row}">
              <span>{{ row.customer.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" class-name="status-col"  width="100">
            <template slot-scope="{row}">
              <!--  <el-tag :type="row.status | statusFilter">
            {{ row.status }}
          </el-tag> -->
              <span v-if="row.status==0" class="status-ball draft" />
              <span v-if="row.status==1" class="status-ball published" />
              <span>{{row.status | statusFilter}}</span>
              <!-- <span>{{ row.status }}</span> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
            <template slot-scope="{row,$index}">

              <el-button type="primary"
                         size="mini"
                         
                         @click.stop="$router.push({ path: `/demand/received/${row.id}` })">查看</el-button>
              <el-button size="medium" type="danger" icon="el-icon-delete" @click="handleDeleteReceived(row)" />
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="getList" />

      </el-tab-pane>
    </el-tabs>
   

    
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getWishList,deleteWish } from '@/api/demand'
import { getDatamap } from '@/api/product'
export default {
  name: 'DemandList',
  components: {Pagination},
  data() {
    return {
      varityList: [], // 类目数组
      brandList: [], // 品牌数组
      countryList: [], // 国家数组
      activeName: 'wait', // tab选项卡
      tableKey: 0,
      // list: null,
      list:null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        page_size: 10,
        category_id:'',//类目
        brand_id:'',//品牌
        traveler_location_id:'',//国家
        keywords:'', //关键词
        type:0,//心愿列表的状态  type  0:待对接，1：已对接 
        /* importance: undefined,
        title: undefined,
        type: undefined, */
        // sort: '+id'
      },
     
      // calendarTypeOptions,
      
     
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
     
      
      downloadLoading: false
    }
  },
   filters: {
    statusFilter(status) {
      switch (status) {
        case 0:
          return '待对接'
          break
        case 1:
          return '已对接'
          break
      }
    },
  },
  created() {
    this.getList()
    this.getDataMap();
  },
  methods: {
    //得到数据字典
    getDataMap(){
      getDatamap().then((res)=>{
        if(res.code == 0){
            this.varityList = res.data.categorys
            this.brandList = res.data.brands
            this.countryList = res.data.locations.list
        }
      })
    },
    //去心愿详情 待对接
    toDemandWait(row){
      this.$router.push({path:`/demand/wait/${row.id}`})
    },
    //去心愿详情 已对接
    toDemandReceived(row){
      this.$router.push({path:`/demand/received/${row.id}`})
    },
    //待对接 删除
    handleDeleteWait(row){
       this.$confirm('是否删除待对接心愿?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteWish(row.id).then(res=>{
        if(res.code == 0){
          this.list = this.list.filter(val=>{
            return row.id != val.id;
          })
          this.total = this.list.length;
          this.$notify({
          message: '待对接心愿删除成功',
          type: 'success',
          duration: 2000,
        })
        }
      })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      
    })
      
    },
    //已对接 删除
    handleDeleteReceived(row){
      this.$confirm('是否删除已对接心愿?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteWish(row.id).then(res=>{
        if(res.code == 0){
          this.list = this.list.filter(val=>{
            return row.id != val.id;
          })
          this.total = this.list.length;
          this.$notify({
          message: '已对接心愿删除成功',
          type: 'success',
          duration: 2000,
        })
        }
      })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      
    })
      
    },
    // 点击切换tab选项卡
    handleClick(tab, event) {
      console.log(tab, event)
      if(this.activeName=='wait'){
        // this.listQuery.status = 0
        this.listQuery.type = 0
        this.getList();
      }else{
        // this.listQuery.status = 1
        this.listQuery.type = 1
        this.getList();
      }
    },
    getList() {
      this.listLoading = true
      getWishList(this.listQuery).then(response => {

        this.total = response.data.pagination.total_record
        this.list = response.data.items
          

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
     handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
      if (prop === 'status') {
        this.sortByStatus(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    

    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>
<style scoped>
  .status-ball{
    display:inline-block;
    border-radius:50%;
    width:8px;
    height:8px;
  }
  .draft{
    background-color:	rgb(167, 107, 167);
  }
  .published{
    background-color:#00FF00;
  }
  .add-brand{
    /* border: 2px solid #eee; */
    padding: 10px 0 10px 15px;
    height: 60px;
  }
  .add-brand .el-button{
    float: right;
    margin-right: 10px;
  }
  .a-hover:hover{
    color: rgb(24, 144, 255);
  }
</style>
